<template>
  <div>
    <a-loading v-if="!querySet && loading" :visible="loading" height="50vh">
    </a-loading>
    <a-table
      :data="querySet"
      :columns="columns"
      :loading="loading"
      :ordering="ordering"
      :page="page"
      :max="max">
      <a-popover-menu slot="action" slot-scope="props" :menu="menu" :instance="props.instance"></a-popover-menu>
    </a-table>
  </div>
</template>

<script>
  import { querySetMixin } from '../../mixins'
  export default {
    name: 'pageAccountFavorites',
    mixins: [querySetMixin],
    data: function () {
      return {
        api: '/api/user/collections/',
        columns: [
          {
            label: '标题',
            field: 'title',
            content (instance) {
              return instance.content_object.title || instance.content_object.name
            },
            link: {
              target: '_blank',
              url: (instance) => {
                const { type, id } = instance.content_object
                return `/${type}/${id}/`
              }
            }
          },
          {
            label: '添加日期',
            format: 'timesince',
            class: 'gt-md',
            field: 'add_date',
            ordering: true,
            width: '140px'
          }
        ],
        menu: [
          {
            name: '浏览',
            icon: 'open_in_new',
            action: (instance) => {
              window.open(`/${instance.content_object.type}/${instance.content_object.id}/`)
            }
          },
          {
            name: '移除',
            icon: 'delete',
            separator: true,
            action: (instance) => {
              this.remove(instance)
            }
          }
        ]
      }
    },
    methods: {
      async remove (instance) {
        if (await this.confirm({
          title: '移出收藏',
          message: '被移除收藏后，你将不能收到该项目的更新动态，是否继续？',
          ok: '移出',
          cancel: '取消'
        }) === false) {
          return
        }
        console.log(instance)
        const { status } = await this.postRequest({
          api: '/api/{type}/{id}/collect/',
          id: instance.content_object.id,
          type: instance.content_object.type
        })

        if (status === 200) {
          this.notify('success', '成功移除收藏夹')
          this.query()
        }
      }
    }
  }
</script>

<style lang="stylus">

</style>
